<template>
  <div class="time" v-show="msgData.info">
    <!-- {{msgData.info}} -->
    {{ timeFormat }}
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    msgData: {
      type: Object,
    },
  },
  computed: {
    timeFormat() {
      let msgYear = this.msgData.info.getFullYear();
      let msgMonth = this.msgData.info.getMonth() + 1;
      let msgDate = this.msgData.info.getDate();
      let msgHour = this.msgData.info.getHours();
      let msgMinute = this.msgData.info.getMinutes();
      let dayMap = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let msgDay = dayMap[this.msgData.info.getDay()];
      let gap = this.dateGap(this.$store.state.currentTime, this.msgData.info);
      let range = this.timeRange(msgHour);
      if (this.$store.state.currentTime < this.msgData.info.getTime()) {
        return "消息时间不能晚于截图时间！";
      } else if (gap == 0) {
        return `${msgHour}:${msgMinute}`;
      } else if (gap == 1) {
        return `昨天 ${msgHour}:${msgMinute}`;
      } else if (gap < 7) {
        if (this.inWeek(this.$store.state.currentTime, this.msgData.info))
          return `${msgDay} ${msgHour}:${msgMinute}`;
        else return `${msgMonth}月${msgDate}日 ${range}${msgHour}:${msgMinute}`;
      } else if (gap >= 7) {
        if (this.$store.state.currentTime.getFullYear() == msgYear) {
          return `${msgMonth}月${msgDate}日 ${range}${msgHour}:${msgMinute}`;
        } else
          return `${msgYear}年${msgMonth}月${msgDate}日 ${msgHour}:${msgMinute}`;
      }
    },
  },
  methods: {
    inWeek(d1, d2) {
      let temp1 = new Date(d1.valueOf());
      let baseTime = new Date(temp1.getTime() - temp1.getDay() * 86400000);
      if (baseTime - d2.valueOf() <= -10000) {
        return true;
      } else {
        return false;
      }
    },
    timeRange(hour) {
      // 上午 [6,11]
      // 中午 [12~13]
      // 下午 [1~5]
      // 晚上 [6-23]
      // 凌晨 [0-5]
      if (hour < 6) {
        return "凌晨";
      } else if (hour < 12) {
        return "上午";
      } else if (hour < 14) {
        return "中午";
      } else if (hour < 18) {
        return "下午";
      } else if (hour < 24) {
        return "晚上";
      }
    },
    dateGap(d1, d2) {
      let temp1 = new Date(d1.valueOf());
      temp1.setHours(0);
      temp1.setMinutes(0);
      temp1.setMilliseconds(0);
      let temp2 = new Date(d2.valueOf());
      temp2.setHours(0);
      temp2.setMinutes(0);
      temp2.setMilliseconds(0);
      let gap = ((temp1.getTime() - temp2.getTime()) / 86400000).toFixed();
      // console.log(gap);
      return gap;

      //   return gap / 86400000;
    },
  },
};
</script>
<style scoped>
.time {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: rgb(160, 160, 160);
  height: 20px;
  margin-top: 12px;
}
</style>